<template>
  <div id="map" ref="mapdom"></div>
</template>

<script setup>
import * as ol from "ol";
import XYZSource from "ol/source/XYZ";
import TileLayer from "ol/layer/Tile";
import { app as $app} from '/src/main.js'
// console.log(ol, "ol");
const mapdom = ref(null);
const gaode_vector = new TileLayer({
  title: "高德地图-矢量图层",
  source: new XYZSource({
    url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
    wrapX: false,
    /* 
    定义地图瓦片的水平包裹方式。当设置为 true 时，表示地图水平方向上无限循环，
    可以在地图的水平方向上一直拖动，形成类似地球的效果。当设置为 false 时，
    表示地图水平方向上不进行循环，即到达地图边界后不能再继续拖动。
在你的代码中，wrapX: false 表示禁止地图在水平方向上进行循环。这通常用于地图的基础图层，
例如街道地图，因为在现实世界中地图是有边界的，不会在水平方向上无限循环。
如果你的地图是一个基础地图（base map），而不是用于某些循环效果的图层，
那么将 wrapX 设置为 false 是合适的。如果你想要实现无限循环的效果，
可以将其设置为 true。
    */
  }),
  visible: true,
  name:'vec'
});
const gaode_image = new TileLayer({
  title: "高德地图-影像图层",
  source: new XYZSource({
    url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
    wrapX: false,
  }),
  visible: false,
  name:'img'
});
// console.log(gaode_vector, gaode_image, "gaode_vector, gaode_image");
$app.provide('$gaode_vector',gaode_vector)
$app.provide('$gaode_image',gaode_image)
let map = null;
onMounted(() => {
  map = new ol.Map({
    target: mapdom.value,
    layers: [gaode_vector, gaode_image],
    view: new ol.View({
      center: [114.3, 30.5],
      zoom: 4,
      // 投影：经纬度坐标系
      projection: "EPSG:4326",
    }),
  });
  $app.provide('$map',map)
  // console.log(map);
});
</script>

<style lang="scss" scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>
